<template>
  <div id="musicIntr">
    <table>
      <tr>
        <td class="leftTitle">歌手名</td>
        <td class="rightContent">{{artInfo.musicArt}}</td>
      </tr>
      <tr>
        <td class="leftTitle">外文名</td>
        <td class="rightContent">{{artInfo.artEnName}}</td>
      </tr>
      <tr>
        <td class="leftTitle">别名</td>
        <td class="rightContent">{{artInfo.artNickName}}</td>
      </tr>
      <tr>
        <td class="leftTitle">国籍</td>
        <td class="rightContent">{{artInfo.artCountry}}</td>
      </tr>
      <tr>
        <td class="leftTitle">生日</td>
        <td class="rightContent">{{artInfo.artBirthday}}</td>
      </tr>
      <tr>
        <td class="leftTitle">职业</td>
        <td class="rightContent">{{artInfo.artProfession}}</td>
      </tr>
      <tr>
        <td class="leftTitle">主要作品</td>
        <td class="rightContent">{{artInfo.artMainMusic}}</td>
      </tr>
      <tr>
        <td class="leftTitle">所属公司</td>
        <td class="rightContent">{{artInfo.artCompany}}</td>
      </tr>
      <tr>
        <td class="leftTitle">简介</td>
        <td class="rightContent">{{artInfo.artBasicInfo}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
    export default {
      name: "musicIntr",
      props:['pushMusicArtId'],
      watch:{
        pushMusicArtId:function (val) {
          this.getArtInfo(val)
        }
      },
      data(){
        return{
          artInfo:{},
        }
      },
      created() {
        this.getArtInfo(this.pushMusicArtId)

      },
      mounted() {
        // console.log(this.pushMusicArtId)
      },
      methods:{
       async getArtInfo(){
          const {data:res} = await this.$axios.post("v1/getArtInfo",{musicArtId:this.pushMusicArtId})
         if(res.code === 200){
           this.artInfo = res.data
         }
        }
      },

    }
</script>

<style lang="less" scoped>
#musicInfo{
  .leftTitle{
    /*padding-right: 20px;*/
    padding-right: 20px;
    font-size: 16px;
    vertical-align: top;
    text-align:justify;
    text-align-last: justify;
    font-weight: 800;
    /*background-color: red;*/
  }
  .rightContent{
    font-size: 16px;
    word-wrap: break-word;
    max-width: 700px;
    vertical-align: top;
  }
  table{
    color: var(--theme-fontMain);
    table-layout: fixed;
    td{
      /*text-align: ;*/
      word-wrap: break-word;
      white-space: pre-wrap;
      padding-bottom: 10px;
    }

  }

}

</style>
